<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-23 23:21:34
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-23 23:53:47
 * @Description: demo03
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        alertHello() {
          alert("Hello");
        }
        render() {
          return (
            <div>
              <h1>Hello {this.props.name}</h1>
              <button onClick={this.alertHello}>点我弹出Hello</button>
              {this.props.children}
            </div>
          );
        }
      }
      ReactDOM.render(
        <Hello name="XiaoBai">
          <p>还有点别的东西</p>
          <p>嘻嘻嘻</p>
        </Hello>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>
